<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        margin: 50px auto;
        position: relative;
      }
      section {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        top: 0;
        left: 0;
        animation-name: abc2;
        animation-duration: 4s;
        animation-delay: 1s;
        /* animation-timing-function: step-start; */
        animation-iteration-count: infinite;
        /* animation-direction: alternate-reverse; */
        /* animation-fill-mode: backwards; */
        /* animation-play-state: paused; */
      }

      div:hover section {
        animation-play-state: paused;
      }

      /* 做关键帧 */
      @keyframes abc1 {
        from {
          left: 0;
        }
        to {
          left: 400px;
        }
      }
      @keyframes abc2 {
        0% {
          top: 0;
          left: 0;
          background-color: blue;
        }
        25% {
          top: 0;
          left: 400px;
          background-color: red;
        }
        50% {
          top: 300px;
          left: 400px;
          background-color: green;
        }
        75% {
          top: 300px;
          left: 0;
          background-color: yellow;
        }
        100% {
          left: 0;
          top: 0;
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <section></section>
    </div>
  </body>
</html>

<!-- 
  c3动画

  CSS3里面的动画指的是animation动画 , animation动画是真正意义上的动画, 不依靠鼠标事件就能完成动画的执行 ; 

​	  基本语法 : animation : name 5s linear 3s infinite alternate  注意 : animation属性是一个复合属性; 后面的取值均有对应的单一属性

  animation是一个复合属性

  animation-name: 表示动画帧名称
    每做一个动画，都需要先做一个关键帧

  animation-duration
    检索或设置对象动画的持续时间

  animation-delay  
    检索或设置对象动画延迟的时间

  animation-timing-function  检索或设置对象动画的过渡类型
	  linear	动画从头到尾的速度是相同的。	测试
    ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
    ease-in	动画以低速开始。	测试
    ease-out	动画以低速结束。	测试
    ease-in-out	动画以低速开始和结束。	测试
    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
    step-end
    step-start 都是省略了中间的过程

  animation-iteration-count 
    检索或设置对象动画的循环次数

  animation-direction  检索或设置对象动画在循环中是否反向运动
    normal：正常方向
    reverse：反方向运行
    alternate：动画先正常运行再反方向运行，并持续交替运行
    alternate-reverse：动画先反运行再正方向运行，并持续交替运行

  animation-fill-mode 
    动画结束时停的位置
    backwards表示停在开始的位置
    forwards表示停在结束的位置

  animation-play-state  检索或设置对象动画的状态
    running:运动
    paused: 暂停




  动画和过渡的区别
    1. 过渡需要用户触发，动画不需要
    2. 过渡只能是1次，动画可以自定义次数
    3. 过渡不能设置中间过程，动画可以用关键帧来设置
 -->
